import './style.css'
import { createApp } from './main'
import { installApi } from './api.js'
const { app, router, pinia } = createApp()

// 初始化 pinia
// 注意：__INITIAL_STATE__需要在 src/shims-global.d.ts中定义
if (window.__INITIAL_STATE__) {
  pinia.state.value = JSON.parse(window.__INITIAL_STATE__);
}

router.isReady().then(() => {
  // beforeResolve表示所有的异步组件全部resolve了
  router.beforeResolve((to, from, next) => {
    // 找出两个匹配列表的差异组件。
    // 如果你刷新当前页面，会发送请求到服务器，服务前拼接好数据和html返回前端，但是有了这个路由钩子，它还会再去请求一遍数据，这就相当于前后台都去请求了一次回去，这没有必要。
    // 所以需要做一个判断是否是在刷新页面，也就是to和from是不是一样的，那就不是刷新，如果一样的，就是刷新操作。那么actived为空，不会执行后面的逻辑，也就是客户端不会再次请求数据接口，用服务端带过来的数据就可以了，这就是防止客户端数据二次预取。
    const toComponents = router
      .resolve(to)
      .matched.flatMap(record => Object.values(record.components))
    const fromComponents = router
      .resolve(from)
      .matched.flatMap(record => Object.values(record.components))

    const actived = toComponents.filter((c, i) => {
      return fromComponents[i] !== c
    })
    // 客户端预取数据有两种方式：一种是在匹配到路由视图之后就跳转，然后去请求接口，另一种是在请求接口数据返回后再进行跳转，此时页面是包含数据的
    if (!actived.length) {
      return next()
    } else {
      // 匹配路由之后直接跳转，然后去请求接口
      next()
    }
  })
  Promise.all([installApi(app)]).then(res => {
    app.config.globalProperties.$getApi = function(file_url){
      return app.config.globalProperties.api[file_url]
    }
    app.mount('#app')
  })
})
// app.mount('#app')
